<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>网址类型 - 网址推荐</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">


</head>
  
<body>
<div class="lyear-layout-web" id="vue">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
       
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="/"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
      </div>
      <div class="lyear-layout-sidebar-scroll">
        
        <nav class="sidebar-main">
          <ul class="nav nav-drawer">
              <li class="nav-item" v-for="(item,index) in menus"> <a :href="item.href"><i :class="item.icon"></i> {{item.name}}</a> </li>
          </ul>
        </nav>
        
        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
        </div>
      </div>
      
    </aside>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <header class="lyear-layout-header">
      
      <nav class="navbar navbar-default">
        <div class="topbar">
          
          <div class="topbar-left">
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title"> 网址类型 </span>
          </div>
          
          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
                <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" />
                <span>笔下光年 <span class="caret"></span></span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                <li class="divider"></li>
                <li> 
					<a href="backend_selfLogin.html">
						<i class="mdi mdi-logout-variant"></i> 退出登录
					</a>
				</li>
              </ul>
            </li>
			
          </ul>
          
        </div>
      </nav>
      
    </header>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-toolbar clearfix">
                <div class="toolbar-btn-action">
				  
				  <button class="btn btn-primary m-r-5" @click="clickAddCategory()">
				  <i class="mdi mdi-plus">新增大类</i>
				  </button>
				  
                  <button class="btn btn-primary m-r-5" @click="clickAdd()">
				  <i class="mdi mdi-plus">新增</i>
				  </button>
				  
                </div>
              </div>
              <div class="card-body">
                
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>大类名称</th>
                        <th>类型名称</th>
                        <th>类型描述</th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item,index) in list">
                        <td>{{item.category}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.description}}</td>
                        <td>{{item.createdate}}</td>
                        <td>{{item.updatedate}}</td>
                        <td>
                          <div class="btn-group">
                            <a class="btn btn-xs btn-default" @click="clickEdit(item)" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                            <a class="btn btn-xs btn-default" @click="clickDel(item)" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
				
                
				  
                
       
              </div>
			  
			  <el-pagination
				@size-change="changeSize"
				@current-change="changePage"
				:current-page="param.page"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="param.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="param.total">
			  </el-pagination>
			  
            </div>
          </div>
        </div>
		
      </div>
      
    </main>

    <!--End 页面主要内容-->
	
	<!-- 模态窗口 -->
	<button id="showModal" v-show="false" class="btn btn-primary m-r-5" type="button"  data-toggle="modal" data-target="#exampleModal" >打开</button>
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="exampleModalLabel">{{operateType}}</h4>
	      </div>
		  
	      <div class="modal-body">
	          
			  
			  <div class="form-group">
			    <label class="control-label" for="example-select">大类名称：</label>
			    <select class="form-control"  v-model="websiteType.parentid"  >
				  <option v-for="(item,index) in category" :value="item.value" :label="item.label"></option>
			     </select>
			  </div>
			  <div class="form-group">
			    <label for="recipient-name" class="control-label">类型名称：</label>
			    <input type="text" class="form-control"  v-model="websiteType.name">
			  </div>
			  
	          <div class="form-group">
	            <label for="message-text" class="control-label">类型描述：</label>
	            <textarea class="form-control" v-model="websiteType.description"></textarea>
	          </div>
	      </div>
		  
	      <div class="modal-footer">
	        <button id="hiddenModal" v-show="false" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-default" @click="clickClose()">关闭</button>
	        <button type="button" class="btn btn-primary" @click="clickEnter()">确定</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	
	<button id="showModalCategory" v-show="false" class="btn btn-primary m-r-5" type="button"  data-toggle="modal" data-target="#exampleModalCategory" >打开</button>
	<div class="modal fade" id="exampleModalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalCategoryLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="exampleModalCategoryLabel">{{operateType}}</h4>
	      </div>
		  
	      <div class="modal-body">
			  <div class="form-group">
			    <label for="recipient-name" class="control-label">类型名称：</label>
			    <input type="text" class="form-control"  v-model="websiteType.name">
			  </div>
			  
	          <div class="form-group">
	            <label for="message-text" class="control-label">类型描述：</label>
	            <textarea class="form-control" v-model="websiteType.description"></textarea>
	          </div>
	      </div>
		  
	      <div class="modal-footer">
	        <button id="hiddenModalCategory" v-show="false" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-default" @click="clickClose()">关闭</button>
	        <button type="button" class="btn btn-primary" @click="clickEnter()">确定</button>
	      </div>
	    </div>
	  </div>
	</div>
	
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>

<!--消息提示-->
<script src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>

<script type="text/javascript" src="vue/vue.min.js"></script>
<script type="text/javascript" src="vue/vue_config.js"></script>
<script type="text/javascript" src="vue/axios.min.js"></script>
<script type="text/javascript" src="vue/vue_api.js"></script>
<script type="text/javascript" src="vue/commons.js"></script>
<link href="vue/element/index.css" rel="stylesheet">
<script type="text/javascript" src="vue/element/index.js"></script> 
<script type="text/javascript">
	

	
	new Vue({
		el: '#vue',
		data: {
            menus:[],
			active: 1,
			modal:{},
			showModal:{},
			hiddenModal:{},
			
			showModalCategory:{},
			hiddenModalCategory:{},
			
			operateType: "新增",
			category: [],
			param: {
				page: 1,
				size: 10
			},//查询使用
			websiteType: {},//添加修改使用的内容
			
			list: [],
			
			currentPage: 1,
			pageSizes: [100, 200, 300, 400],
		},
		created(){
		    this.getMenusList();
			this.categorys();
			this.listWebsiteType();
		},
		mounted(){
			this.showModal = document.getElementById("showModal")
			this.hiddenModal = document.getElementById("hiddenModal")
			
			this.showModalCategory = document.getElementById("showModalCategory")
			this.hiddenModalCategory = document.getElementById("hiddenModalCategory")

            //exampleModalCategory
            const exampleModal = document.getElementById("exampleModal");
            $(exampleModal).on('hide.bs.modal', this.onModalHide);

            const exampleModalCategory = document.getElementById("exampleModalCategory");
            $(exampleModalCategory).on('hide.bs.modal', this.onModalHide);
		},
		
		methods: {
            getMenusList(){
                var url = rootUrl+"sys/menus";
                fetchDataGet(url).then(res =>{
                    this.menus=res.list;
                })
            },
            onModalHide(){
                console.log("模态框隐藏")
                this.websiteType = {};
            },
			changeSize(val){
				this.param.size = val;
				this.toPage();
			},
			changePage(val){
				this.param.page = val;
				this.toPage();
			},
			toPage(index){
				
				this.listWebsiteType();
			},
			clickAddCategory(){
				this.operateType="新增大类";
				this.showModalCategory.click();
			},
			clickAdd(){
				this.operateType="新增";
				this.showModal.click();
			},
			clickEdit(row){
				this.operateType="编辑";
				this.websiteType = row
				this.showModal.click();
			},
			clickCheck(){
				this.operateType="查看";
				this.showModal.click();
			},
			clickEnter(){
				if(this.operateType === "新增"){
					this.addWebsiteType();
				}
				if(this.operateType === "编辑"){
					this.updateWebsiteType();
				}
				if(this.operateType === "新增大类"){
					this.addWebsiteCategory();
				}
			},
			
			clickDel(row){
				this.delWebsiteType(row)
			},
			clickClose(){
				if(this.operateType === "新增大类"){
					this.websiteType = {};
					this.hiddenModalCategory.click();
				}else{
					this.websiteType = {};
					this.hiddenModal.click();
				}
				
			},
			
			categorys(){
				var url = rootUrl+"websiteType/categorys/selectInfo";
				fetchDataGet(url).then(res =>{
					this.category = res.list;
				})
			},
			
			addWebsiteCategory(){
				var url = rootUrl+"websiteType/categorys/add";
				fetchDataPost(url,this.websiteType).then(res =>{
					console.log(res)
					if(res.code === 200){
						success(res.message);
						this.hiddenModalCategory.click();
						this.categorys();
						//this.listWebsiteType();
						this.websiteType = {};
					}else{
						danger(res.message);
					}
				})
			},
			
			listWebsiteType(){
				var url = rootUrl+"websiteType/list";
				fetchDataPostList(url,this.websiteType,this.param).then(res =>{
					if(res.code === 200){
						this.list = res.list;
						this.param = res.metaInfo
						success(res.message);
					}else{
						danger(res.message);
					}
				})
			},
			addWebsiteType(){
				var url = rootUrl+"websiteType/add";
				fetchDataPost(url,this.websiteType).then(res =>{
					console.log(res)
					if(res.code === 200){
						success(res.message);
						this.hiddenModal.click();
						this.listWebsiteType();
						this.websiteType = {};
					}else{
						danger(res.message);
					}
				})
			},
			updateWebsiteType(){
				var url = rootUrl+"websiteType/update";
				fetchDataPost(url,this.websiteType).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.hiddenModal.click();
						this.listWebsiteType();
						this.websiteType = {};
					}else{
						danger(res.message);
					}
				})
			},
			delWebsiteType(websiteType){
				var url = rootUrl+"websiteType/del";
				fetchDataPost(url,websiteType).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listWebsiteType();
					}else{
						danger(res.message);
					}
				})
			},
			
		},
	})
</script>
</body>
</html>